<template>
  <div class="login">
    <div class="login-container">
      <h3>行健微服务平台</h3>
      <el-form
        ref="loginFormRef"
        :model="loginFormData"
        :rules="loginFormRules"
        class="demo-ruleForm"
      >
        <el-form-item
          prop="username"
        >
          <el-input
            v-model="loginFormData.username"
            placeholder="请输入用户名"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item
          prop="password"
        >
          <el-input
            v-model="loginFormData.password"
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Key"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="vw-100"
            @click="loginSubmit"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="rotating-plane" />
  </div>
  <Particles
    id="tsparticles"
    class="login-partic"
    :particles-init="particlesInit"
    :particles-loaded="particlesLoaded"
    :options="options"
  />
</template>

<script lang="ts" setup>
import Particles from '@/views/login/Particles.vue'
import { reactive, ref, toRefs, watch } from 'vue'
import { loadFull } from 'tsparticles'
import { IFormData } from '@/model/views/login/loginInter'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Key } from '@element-plus/icons-vue'
import { Engine } from 'tsparticles-engine'
import { setToken } from '@/utils/auth'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const loginFormRef = ref<FormInstance>()
const formOption = reactive({
  loginFormData: {
    username: '',
    password: ''
  } as IFormData,
  loginFormRules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ]
  } as FormRules
})

const redirect = ref<string>()
watch(route, (route) => {
  const query = route.query
  if (query) {
    redirect.value = query.redirect as string
  }
}, {
  immediate: true
})

const loginSubmit = () => {
  if (!loginFormRef.value) return
  loginFormRef.value?.validate(valid => {
    if (valid) {
      setToken('auth_token')
      router.push({ path: redirect.value || '/' })
    }
  })
}

const ParticlesData = reactive({
  options: {
    fpsLimit: 50,
    interactivity: {
      events: {
        onClick: {
          enable: true,
          mode: 'push'
        },
        onHover: {
          enable: true,
          mode: 'grab'
        },
        resize: true
      },
      modes: {
        bubble: {
          distance: 400,
          duration: 2,
          opacity: 0.6,
          size: 10
        },
        push: {
          quantity: 4
        },
        repulse: {
          distance: 200,
          duration: 0.4
        }
      }
    },
    particles: {
      color: {
        value: '#ffffff'
      },
      links: {
        color: '#ffffff',
        distance: 150,
        enable: true,
        opacity: 0.5,
        width: 1
      },
      collisions: {
        enable: true
      },
      move: {
        direction: 'none',
        enable: true,
        outMode: 'bounce',
        random: false,
        speed: 2,
        straight: false
      },
      number: {
        density: {
          enable: true,
          value_area: 800
        },
        value: 60
      },
      opacity: {
        value: 0.5
      },
      shape: {
        type: 'circle'
      },
      size: {
        random: true,
        value: 3
      }
    },
    detectRetina: true
  },
  particlesInit: async (engine:Engine) => {
    await loadFull(engine)
  },
  particlesLoaded: async (container:any) => {
  }
})

const { options, particlesInit, particlesLoaded } = toRefs(ParticlesData)
const { loginFormData, loginFormRules } = toRefs(formOption)
</script>

<style scoped lang="scss">
.login{
  width: 100%;
  height: 100%;
  background: url("@/assets/image/login/login-bg.jpg") 50% 50% no-repeat;
  background-size: cover;
  position: relative;
  perspective: (120px);
  .login-container{
    width: 350px;
    height: 350px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 25px #333;
    padding: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    &.effect{
      //添加动态效果
      animation: login-small 0.8s linear;
      animation-fill-mode: forwards;
    }
    h3{
      font-size: 24px;
      margin-bottom: 25px;
      text-align: center;
      //font-style: italic;
    }
  }
  .rotating-plane{
    display: none;
    width: 80px;
    height: 80px;
    background: linear-gradient(to right, #467E85 , #E5E6D5);
    position: absolute;
    top: 50%;
    left: 50%;
    //transform: translate(-50%,-50%);
    margin-left: -40px;
    margin-top: -40px;
    animation: rotating-plane 2s infinite;
    &.active{
      display: block;
    }
  }
}
:deep(.el-input){
  height: 40px;
}
.display-none{
  display: none;
}
//定义动画
@keyframes login-small {
  0% {
    // 位移 translate， 放大缩小 scale: ;
    transform: translate(-50%,-50%) scale(1) ;
  }
  100% {
    transform: translate(-50%,-50%) scale(0.2) ;
  }
}

@keyframes rotating-plane {
  0%{
    transform: rotateX(0deg) rotateY(0);
  }
  50% {
    transform:rotateX(-180deg) rotateY(0);
  }
  100% {
    transform: rotateX(-180deg) rotateY(180deg);
  }
}
</style>
